<button type="button">click me!</button>  
            <style>
                :root {--blue: #74bcdd; --dark-blue: #2d3e51; --red: #f74442; --yellow: #fbca32; --green: #5be95b;--grey: #ebeced;}
                /* button */
                button { width: 20vw; height: 4vw; background-color: var(--blue); border: none;  outline: none;  cursor: pointer;
                    color: var(--dark-blue);  font-size: 1.6vw; border-bottom: 0.4vw solid currentColor;}
                button{margin: 2vw; color: white; border-radius: 4vw; transition: background-color 300ms, transform 300ms;}
                button:hover {background-color: var(--dark-blue); transform: scale(1.1);}
                button:active {background-color: var(--red); transform: scale(0.8);}
            </style>
        

            <div>
                <a href="https://www.google.com" target="_target">check me out!</a><br>
                <a href="http://www.facebook.com" target="_blank">visit Facebook</a><br />
            </div>
            <style>
            a:not(h2~a){display: inline-block; box-sizing: border-box; position: relative; margin-left: 3vw; width: 15vw; height: 2vw; text-align: left;
                    color: black; background-size: 150%;}
            a:link {color: blue; text-decoration: none;}
            a:hover {text-decoration: underline; } 
            a:active {color: darkblue;}
            a::after {position: absolute; right:-4px; top: 6px; width: 1.5vw; height: 1.5vw; background-size: 100%;}
            a[download]::after {content: ""; background-image: url("download.png");}
            a[href$=".pdf"][download]::after {content: ""; background-image: url("pdf.png");}
            a[href*="facebook.com"]::after {content: ""; background-image: url("fb.png");}
            a[href^="https://"]::before{content: "Secure link: ";}
            </style>
        

            <div>
                <a href="../images/car2.jpg" download>download picture</a><br/>
                <a href="../images/blog-20-12-13.pdf" download>download PDF</a><br/>
            </div>
            <style>
            a:not(h2~a){display: inline-block; box-sizing: border-box; position: relative; margin-left: 3vw; width: 15vw; height: 2vw; 
                text-align: left; color: black; background-size: 150%;}
            a:link {color: blue; text-decoration: none;}
            a:hover {text-decoration: underline; } 
            a:active {color: darkblue;}
            a::after {position: absolute; right:-4px; top: 6px; width: 1.5vw; height: 1.5vw; background-size: 100%;}
            a[download]::after {content: ""; background-image: url("download.png");}
            a[href$=".pdf"][download]::after {content: ""; background-image: url("pdf.png");}
            </style>
        

            <div class="product-card" tabindex="0">
                <img class="product-image" src="../images/camera.png" alt="camera" />
                <h1 class="name">film camera</h1>
                <button class="cart-button">add to cart</button>
            </div>
            <style> 
                :root {--blue: #74bcdd; --dark-blue: #2d3e51; --red: #f74442; --yellow: #fbca32; --green: #5be95b;--grey: #ebeced;}
                /*click to focus  */
                .product-card { width: 30vw; height: 35vw; margin: 0 auto; background-color: white; box-shadow: 0 0 2vw rgba(0, 0, 0, 0.15);
                    outline: none; cursor: pointer; overflow: hidden;}
                .product-image {width: 80%; height: 16vw;  background-color: var(--blue); 
                    display: block; object-fit: contain; transition: height 300ms, 
                    background-color 300ms;}
                .name {margin: 1vw; font-size: 3vw;}
                .cart-button { margin-left: 1vw;}
                .product-card:focus > .product-image { height: 22vw; background-color: 
                    var(--dark-blue);} 
            </style>